.banner-container {
	padding-top: 200px;
	padding-bottom: 150px;
	background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);
	position: relative;

	.banner {
		margin: 0px auto;
		padding: 30px 0px;
		display: flex;
		justify-content: center;
		align-items: center;

		.text-info {
			h1 {
				font-size: 4.625rem;
				font-family: MatterSQ-SemiBold;
				color: #fff;
			}

			p {
				color: #fff;
			}
		}
	}

	.banner-bg {
		position: absolute;
		left: 20px;
		bottom: 80px;
		// z-index: -1;
	}

	.banner_bg_animation {
		animation: banner_animation 3s linear infinite alternate;
	}

	@keyframes banner_animation {
		0% {
			transform: translateY(0px);
		}

		100% {
			transform: translateY(20px);
		}
	}
}

.swiper-container {
	padding: 60px 0px;
	// background-color: #f3f7fb;
	background: url(../resoures/images/swiper_bg.png) no-repeat;
	background-size: 100% 100%;

	.swiper {

		padding: 30px 0px;
		margin: 0px auto;

		.swiper-slide {
			width: 30%;
			height: 525px;
			border-radius: 18px;
			overflow: hidden;

			&:hover {
				transform: scale(1.05, 1.05);
			}

			.image-box {
				height: 100%;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.deivce-info {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.2);
				color: #fff;
				padding: 0px 20px;
				display: flex;
				flex-direction: column;
				text-align: center;
				justify-content: center;
				cursor: pointer;
			}
		}
	}
}

.list-container {
	padding: 60px 0px;
	background: url(../resoures/images/list_bg.png) no-repeat;
	background-size: 100% 100%;

	.show-list {

		margin: 0px auto;
		padding: 30px 0px;

		.search-form {
			width: auto;
			margin-bottom: 10px;

			.search-form-check {
				display: flex;
				justify-content: end;

				li {
					padding: 4px 8px;
					border: 1px solid #3c72fc;
					border-radius: 4px;
					min-width: 80px;
					text-align: center;
					cursor: pointer;

					&+li {
						margin-left: 10px;
					}
				}
			}

			.search-form-select {
				width: 120px;
				margin: 0px 0px 0px auto;
			}
		}

		.list-box {
			list-style: none;
			width: 100%;
			justify-content: space-between;
			display: flex;
			flex-wrap: wrap;

			li {
				width: 30%;
				height: 525px;
				box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);
				margin-bottom: 40px;
				border-radius: 18px;
			}
		}

		.page-icon {
			display: flex;
			justify-content: space-evenly;

			span {
				font-size: 28px;
				color: #3c72fc;
				cursor: pointer;
			}
		}
	}

}